<template>
	<div class="login_register_container">
		<img class="bg" :src="loginBackground" />
		<el-scrollbar>
			<el-row type="flex">
				<el-col :xs="24" :sm="8" class="login_register_form">
					<div class="header">
						<h2>{{ title }}</h2>
						<p>{{ tips }}</p>
					</div>
					<slot></slot>
					<el-divider></el-divider>
					<div class="bottom">
						<template v-if="routerName === 'Login'">
							<p>
								<span>还没账号？</span>
								<router-link :to="{ path: '/register' }">注册</router-link>
							</p>
							<p><router-link :to="{ path: '/forgetpass' }">忘记密码</router-link></p>
						</template>
						<p v-else-if="routerName === 'Register'">
							<span>已经有账户了吗？</span>
							<router-link :to="{ path: '/login' }">登录</router-link>
						</p>
						<p v-else-if="routerName === 'ForgetPass'">
							<span>记起密码？返回</span>
							<router-link :to="{ path: '/login' }">登录</router-link>
						</p>
					</div>
				</el-col>
				<el-col :xs="24" :sm="16" class="login_register_tips">
					<div class="logo">
						<img :src="logoImage" />
						<h2 v-html="siteName"></h2>
					</div>
					<div class="tips" v-if="routerName === 'Login'" v-html="siteInfo.field10"></div>
					<div class="icon" v-if="routerName === 'Register'"><img :src="registerUser" /></div>
					<div class="icon" v-if="routerName === 'ForgetPass'"><img :src="retrievePass" /></div>
				</el-col>
			</el-row>
		</el-scrollbar>
		<div class="foot">{{ siteInfo.field4 }}</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	props: {
		title: { type: String, default: '' },
		tips: { type: String, default: '' }
	},
	data() {
		return {
			loginBg: '',
			registerUser: require('@/assets/img/register_user.svg'),
			retrievePass: require('@/assets/img/retrieve_password.svg')
		};
	},
	computed: {
		...mapGetters(['siteLogo', 'siteInfo']),
		routerName() {
			return this.$route.name;
		},
		siteName() {
			let name = this.siteInfo.name || '网站基本';
			return name.split(' ').join('<br />');
		},
		logoImage() {
			if (!this.siteInfo.webLogo) {
				return require('@/assets/img/logo.png');
			} else {
				return this.siteLogo;
			}
		},
		loginBackground() {
			if (!this.loginBg) {
				return require('@/assets/img/login_bg.png');
			} else {
				return this.loginBg.setFilePath();
			}
		}
	},
	async mounted() {
		if (!!this.siteInfo.field1 && this.siteInfo.field1 !== '-1') {
			this.loginBg = await this.$store.dispatch('getFileUrl', this.siteInfo.field1);
		}
	}
};
</script>

<style lang="scss" scoped>
.login_register_container {
	position: relative;
	overflow: hidden;
	height: 100vh;
	width: 100vw;
	img.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		filter: blur(5px);
		object-fit: cover;
		transform: scale(1.1);
	}
	.el-scrollbar {
		height: 100%;
	}
	&:deep(.el-scrollbar__wrap) {
		overflow: hidden;
		overflow-y: auto;
	}
	&:deep(.el-scrollbar__view) {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-height: 100vh;
		flex-wrap: wrap;
		padding: 4%;
	}
	&:deep(.el-row) {
		border-radius: 8px;
		flex-direction: row-reverse;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		flex-wrap: wrap;
		width: 912px;
	}
}
.login_register_form,
.login_register_tips {
	padding: 5%;
	min-width: 320px;
	max-width: 600px;
	box-sizing: border-box;
}

.login_register_form {
	flex: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #fff;
	&:deep(.el-button.submit) {
		width: 100%;
		font-size: 18px;
	}
	&:deep(.el-form) {
		padding-top: 5%;
	}
	&:deep(.el-form-item__content) {
		display: flex;
		align-items: center;
		.verify {
			cursor: pointer;
			margin-left: 10px;
		}
	}
	&:deep(.el-input__icon) {
		font-size: 18px;
	}
	&:deep(.el-input__inner) {
		font-size: 16px;
		border-radius: 0;
		border-top: none;
		border-left: none;
		border-right: none;
		background-color: #fff;
	}
	.header {
		line-height: 1;
		h2 {
			font-size: 20px;
			margin-bottom: 16px;
			color: #303133;
		}
		p {
			font-size: 14px;
			color: #909399;
		}
	}
	.el-divider--horizontal {
		margin: 5% 0;
	}
	.bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 6px;
		font-size: 16px;
		line-height: 1;
	}
}

.login_register_tips {
	display: flex;
	flex-direction: column;
	flex: 3;
	color: #fff;
	font-size: 15px;
	line-height: 2em;
	background-color: var(--primary-hover);
	.logo {
		display: flex;
		align-items: center;
		flex-shrink: 0;
		img {
			height: 64px;
		}
		h2 {
			font-size: 18px;
			line-height: 1.75;
			margin-left: 16px;
		}
	}
	.tips {
		flex: 1;
		margin-top: 5%;
	}
	.icon {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		overflow: hidden;
		padding: 10%;
		flex: 1;
	}
	.icon img {
		width: 100%;
	}
}
@media screen and (max-width: 768px) {
	.login_register_container:deep(.el-row) {
		width: 100%;
	}
}
</style>
